<template>
	<div class="map-chart" id="mapEchart" ref="mapEchart"></div>
</template>

<script  setup>
	import * as echarts from "echarts";
	import "echarts-gl"; //3D地图插件
	import {
		onMounted,
		ref
	} from "vue";
	import axios from "axios";

	/**
	 * 初始化地图
	 */
	let mapEchart = ref()
	// 定义echarts方法
	const chartMap = async () => {
		// 初始化dom
		const myChart = echarts.init(
			mapEchart.value
		);
		// 初始化map
		initMap(myChart, "map", "100000");
		// 添加点击事件
		myChart.on("click", (e) => {
			// console.log(e);
			const newName = e.name;
			if (e.value.level === "district") return alert("该地区已经无法下钻");
			// 添加历史记录
			historyMapData.value.push(e.value);
			// 初始化地图
			initMap(myChart, newName, e.value.adcode);
		});
		//让可视化地图跟随浏览器大小缩放
		window.addEventListener("resize", () => {
			myChart.resize();
		});
	};
	const initMap = async (
		chartDOM,
		geoName ,
		adcode 
	) => {
		// 清除echarts实例
		chartDOM.clear();
		// 请求map的json
		const mapData = await getMapJSON(adcode, geoName);
		// 图表配置项
		const option = getOption(geoName, mapData);
		// 渲染配置
		chartDOM.setOption(option);
	};
	/**
	 * 地图配置项
	 */

	// 请求地图json数据，并过滤成地图data配置项
	const getMapJSON = async (adcode = "100000", geoName ) => {
		const res = await axios.get(
			`https://geo.datav.aliyun.com/areas_v2/bound/${adcode}_full.json`
		);
		// 重新注册地图
		echarts.registerMap(geoName,res.data);
		// 过滤json数据
		const mapData = res.data.features.map((item) => {
			return {
				value: item.properties,
				name: item.properties.name,
			};
		});

		return mapData;
	};

	// 图表生成配置项
	const getOption = (geoName, mapData ) => {
		// 图表配置项
		const option = {
			geo3D: {
				zlevel: -100,
				roam: 'move',
				viewControl:{
					rotateSensitivity: 0,
					 alpha :90,
					 beta:0,
					  animationDurationUpdate:0
				},
				show: true,
				map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
				regionHeight: 3,
				shading: "realistic",//真实感材质相关的配置项，在 shading 为'realistic'时有效。
				realisticMaterial: {//纹理 地图背景
					detailTexture: "/images/logo.png",
				},
				itemStyle: {
					borderWidth: 1,
					borderColor: "#f17f05",
					color: "#6597D0",// 整个地图的颜色
					opacity: 1,
				},
				label: {
					show: true, // 是否显示标签。
					textStyle: {
						color: "#fff", // 地图初始化区域字体颜色
						fontSize: 40,
					},
					formatter: (e ) => {
						return ` ${e.name}`;
					},//<div style="background-color:#000;color:#fff;">${e.name}</div> 
				},
			},
			series: [{
				zlevel: -10,
				roam: 'move',
				viewControl:{
					rotateSensitivity: [1, 0]
				},
				
				regionHeight: 1,
				type: "map3D",
				map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
				data: mapData, //这里比较重要：获得过滤后的data，这样点击事件时就能获得这个data的值
				emphasis: {
					label: {
						show: true,
						textStyle: {
							color: "#f17f05", // 字体颜色
							fontSize: 40,
						},
					},

					itemStyle: {
						color:"transparent",
						opacity: 0.5
					},
				},
				shading: "realistic",
				realisticMaterial: {
					detailTexture: "/images/lx.png",
					textureTiling: 1,
				},
				itemStyle: {
					color: "transparent",
				},
				regions:[
					{
						name:"北京市",
						regionHeight:4,
						itemStyle: {
							color:"transparent",
							opacity: 1
						},
						emphasis: {
							label: {
								show: true,
								textStyle: {
									color: "#f17f05", // 字体颜色
									fontSize: 20,
								},
							},
						
							itemStyle: {
								color:"transparent",
								opacity: 0.5
							},
						},
						
					}
				]
			},],
		};
		return option;
	};

	/**
	 * 返回上级地图功能
	 */

	// type HistoryData = {
	// 	name : string;
	// 	adcode : string | undefined;
	// };
	// 地图下钻历史记录
	const historyMapData = ref([{
		name: "map",
		adcode: "100000"
	}]);
	// 返回上级地图
	const backMap = () => {
		const myChart = echarts.init(
			document.getElementById("mapEchart")
		);
		// 去除当前的地图信息
		historyMapData.value.pop();
		const len = historyMapData.value.length;
		// 获取上一级的地图信息
		const newdata = historyMapData.value[len - 1];
		// 重新渲染地图
		initMap(myChart, newdata?.name || "map", newdata?.adcode || "100000");
	};

	/**
	 * 生命周期
	 */
	onMounted(() => {
		// 挂载echart
		chartMap();
	});
</script>

<style scoped>
	.investment-screen {
		background-color: rgb(0, 0, 42);
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.map-chart {
		width: 80%;
		height: 80%;
	}
</style>